<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;">

        <el-form-item label="状态" prop="type">
          <el-select
            v-model="queryForm.type"
            placeholder="状态选择"
            style="width: 100px;">
            <el-option label="状态 1" value="1"/>
            <el-option label="状态 2" value="2"/>
            <el-option label="状态 3" value="3"/>
            <el-option label="状态 4" value="4"/>
            <el-option label="状态 5" value="5"/>
          </el-select>
        </el-form-item>

        <el-form-item label="用户" prop="user">
          <el-input
            v-model="queryForm.user"
            placeholder="用户"
            style="width: 100px;"/>
        </el-form-item>

        <el-form-item label="卡密" prop="key">
          <el-input
            v-model="queryForm.key"
            placeholder="卡密"
            style="width: 120px;"/>
        </el-form-item>

        <el-form-item label="备注" prop="note">
          <el-input
            v-model="queryForm.note"
            placeholder="备注"
            style="width: 120px;"/>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="handleFormSubmit">
            <d2-icon name="search"/>
            查询
          </el-button>
        </el-form-item>

      </el-form>
    </template>
    <split-pane :min-percent='10' :max-percent='20' :default-percent='20' split="vertical">
      <template slot="paneL">
        <my-area-tree @change="onAreaChange" />
      </template>
      <template slot="paneR">
        <d2-crud
          ref="d2Crud"
          :columns="columns"
          :data="data"
          add-title="我的新增"
          :add-template="addTemplate"
          :form-options="formOptions"
          @dialog-open="handleDialogOpen"
          @row-add="handleRowAdd"
          @dialog-cancel="handleDialogCancel">
          <el-button slot="header" style="margin-bottom: 5px" size="mini" @click="addRow">新增</el-button>
        </d2-crud>
      </template>
    </split-pane>

  </d2-container>
</template>

<script>
  import MyAreaTree from "@/components/my-area-tree";
export default {
  name: 'page1',
  components: {MyAreaTree},
  data () {
    return {
      queryForm: {
        type: '1',
        user: 'FairyEver',
        key: '',
        note: ''
      },
      columns: [
        {
          title: '日期',
          key: 'date'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '地址',
          key: 'address'
        }
      ],
      data: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      addTemplate: {
        date: {
          title: '日期',
          value: '2016-05-05'
        },
        name: {
          title: '姓名',
          value: '王小虎'
        },
        address: {
          title: '地址',
          value: '上海市普陀区金沙江路 1520 弄'
        }
      },
      formOptions: {
        labelWidth: '80px',
        labelPosition: 'left',
        saveLoading: false
      }
    }
  },
  methods: {
    handleFormSubmit () {
      this.$refs.queryForm.validate((valid) => {
        if (valid) {
          this.$emit('submit', this.queryForm)
        } else {
          this.$notify.error({
            title: '错误',
            message: '表单校验失败'
          })
          return false
        }
      })
    },
    handleFormReset () {
      this.$refs.queryForm.resetFields()
    },
    handleDialogOpen ({ mode }) {
      this.$message({
        message: '打开模态框，模式为：' + mode,
        type: 'success'
      })
    },
    addRow () {
      this.$refs.d2Crud.showDialog({
        mode: 'add'
      })
    },
    handleRowAdd (row, done) {
      this.formOptions.saveLoading = true
      setTimeout(() => {
        console.log(row)
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        done({
          address: '我是通过done事件传入的数据！'
        })
        this.formOptions.saveLoading = false
      }, 300)
    },
    handleDialogCancel (done) {
      this.$message({
        message: '取消保存',
        type: 'warning'
      })
      done()
    }
  }
}
</script>
